<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1, minimum-scale=1, maximum-scale=1">
<meta name="referrer" content="never">
<meta name="robots" content="index,follow">
<link rel="shortcut icon" href="/favicon.png?v=198964">
<link rel="apple-itouch-icon" href="/favicon.png?v=198964">
<link href="/bundle/index.min.css" rel="stylesheet">
<link href="https://fonts.loli.net/css?family=Merriweather:300,700,700italic,300italic|Open+Sans:700,400" rel="stylesheet">
<link href="https://cdn.staticfile.org/prism/1.16.0/themes/prism.min.css" rel="stylesheet">
<link href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script>
    function ensureDate(e){return"object"!=typeof e&&(e=new Date(e)),e}function dateFormat(e,t){void 0===t&&(t=e,e=ensureDate());let n={M:(e=ensureDate(e)).getMonth()+1,d:e.getDate(),h:e.getHours(),m:e.getMinutes(),s:e.getSeconds(),q:Math.floor((e.getMonth()+3)/3),S:e.getMilliseconds()},r=new RegExp("([yMdhmsqS])+","g");return t=t.replace(r,function(t,r){let u=n[r];if(void 0!==u)return t.length>1&&(u=(u="0"+u).substring(u.length-2)),u;if("y"===r){return(e.getFullYear()+"").substring(4-t.length)}return t})}
</script>
    <meta name="keywords" content="Flex基础布局详解,Flex,CSS,">
    <meta name="description" content="Flex基础布局详解,Flex,CSS,">
    <meta name="author" content="江矿先森.">
    <title>Flex基础布局详解</title>
    <link href="/bundle/iconfont.css" rel="stylesheet">
    <link href="/bundle/reward.css" rel="stylesheet">
    <script src='/bundle/av.min.js'></script>
    <script src='/bundle/valine.min.js'></script>
</head>

<body>
    <article class="container">
        <header class="header-wrap asset">
    <nav class="main-nav">
        <ul class="menu vertical naive">
            <li class="menu-item"><a href="/">Home</a></li>
            <li class="menu-item"><a href="/archive.html">Archive</a></li>
            <li class="menu-item"><a href="/tag.html">Tag</a></li>
            
            <li class="menu-item"><a href="/atom.xml">RSS</a></li>
        </ul>
    </nav>
    <div class="bgs" style="background-image: url(https://pic6.58cdn.com.cn/nowater/webim/big/n_v212fe49b1d6d5492cb1def84eeff4b142.jpg);"></div>
    <div class="vertical">
        <div class="header-wrap-content inner">
            <h3 class="title">Stay before every beautiful thoughts.</h3>
            <h3 class="subtitle">Just be nice, always think twice!</h3>
        </div>
    </div>
</header>
        <article class="main article">
            <h1 class="title">Flex基础布局详解</h1>
            <section class="info">
                <span class="avatar" style="background-image: url(https://pic1.58cdn.com.cn/nowater/webim/big/n_v2a9773b605e754c8493cf53ca8f5c0d7e.jpg);"></span> <a class="name" href="javascript:;">江矿先森.</a> 
                <span class="date"><script>document.write(dateFormat( 1505816634 *1000, 'yyyy-MM-dd'))</script></span> 
                <span class="tags"><a class="tages" href="/tag/Flex/index.html">Flex</a><a class="tages" href="/tag/CSS/index.html">CSS</a></span>
            </section>
            <article class="content"><h1>flex属性</h1>

<p>一个flex布局的页面所具有的元素可分为2类。</p>

<ul>
<li>1.弹性容器</li>
<li>2.弹性元素（包含在弹性容器内的元素）</li>
</ul>

<h2>弹性容器</h2>

<p>弹性容器拥有横轴(main)和纵轴(cross)2种方向来决定着整体flex布局的流向，默认布局：横轴从左(main start)到右(main end)，纵轴从上(cross start)到下(cross end)</p>

<p><img src="" data-src="https://sfault-image.b0.upaiyun.com/134/028/1340284239-58c253c58c759_articlex" alt="" /></p>

<ul>
<li>flex-direction</li>
</ul>

<blockquote>
<p>指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向)。</p>
</blockquote>

<p>row：默认，保持原布局不变，按照横轴方向布局，即从左(main start)到右(main end)</p>

<p>row-reverse：按照横方向布局，置换横默认方向，即从右(main end)到左(main start)</p>

<p>column： 按照纵轴默认方向布局，即从上(cross start)到下(cross end)</p>

<p>column-reverse：按照纵轴方向布局，置换纵轴默认方向，即从下(cross start)到上(cross end)</p>

<p><img src="" data-src="https://sfault-image.b0.upaiyun.com/622/085/622085148-58c24de3a0d99_articlex" alt="" /></p>

<p><code>注：flex-direction的值即为整个flex布局的主轴，flex-direction:row | row-reverse则于横轴为主轴，flex-direction:column | column-reverse则于纵轴为主轴，另外的为侧轴</code></p>

<ul>
<li>flex-wrap</li>
</ul>

<blockquote>
<p>指定 flex 元素单行显示还是多行显示 。如果允许换行，这个属性允许你控制行的堆叠方向</p>
</blockquote>

<p>nowrap： 默认，单行显示，假如宽度溢出，则自动压缩相应元素的宽度（压缩比例与flex-shrink相关），保持单行。</p>

<p>wrap： 多行显示，假如宽度溢出，自动换行。</p>

<p>wrap-reverse：多行显示，置换侧轴的方向。</p>

<p><img src="" data-src="https://sfault-image.b0.upaiyun.com/363/850/3638502166-58c24eef71680_articlex" alt="" /></p>

<ul>
<li>flex-flow</li>
</ul>

<blockquote>
<p>flex-direction 和 flex-wrap 的简写</p>
</blockquote>

<pre><code class="language-css">.class{
    flex-flow: column-reverse wrap;/*默认属性*/
}
</code></pre>

<ul>
<li>justify-content</li>
</ul>

<blockquote>
<p>属性定义弹性元素在主轴方向的排列</p>
</blockquote>

<p>flex-start： 默认值，按照主轴方向进行排列</p>

<p>flex-end： 置换主轴方向进行排列</p>

<p>center： 向中点居中排列</p>

<p>space-between： 在主轴上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。</p>

<p>space-around：在主轴上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。</p>

<p><img src="" data-src="https://sfault-image.b0.upaiyun.com/348/615/3486154553-58c24f36cebc7_articlex" alt="" /></p>

<ul>
<li>align-items</li>
</ul>

<blockquote>
<p>属性定义了弹性元素在侧轴方向的排列</p>
</blockquote>

<p>flex-start： 默认值，按照侧轴方向排列</p>

<p>flex-end： 置换侧轴方向进行排列，主轴不变</p>

<p>center： 向中点居中排列</p>

<p>baseline： 所有元素向基线对齐。侧轴起点到元素基线距离最大的元素将会于侧轴起点对齐以确定基线(不是很明白，MDN上面的解释)</p>

<p>stretch：拉伸弹性元素，填充侧轴空间</p>

<p><img src="" data-src="https://sfault-image.b0.upaiyun.com/262/251/2622514220-58c24f56a61c0_articlex" alt="" /></p>

<ul>
<li>align-content</li>
</ul>

<blockquote>
<p>属性定义了当弹性元素超过一行时，元素在纵轴上的排列方式</p>
</blockquote>

<p>flex-start： 默认值，紧贴前一行，第一行紧贴边缘，与主轴排列方式有关</p>

<p>flex-end： 置换侧轴方向进行排列，紧贴前一行</p>

<p>center： 向中点居中排列，紧贴前一行</p>

<p>space-between： 所有行在容器中平均分布。相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的边对齐</p>

<p>space-around：所有行在容器中平均分布，相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半</p>

<p>stretch：平均分配侧轴空间，相邻行间距相等</p>

<p><img src="" data-src="https://sfault-image.b0.upaiyun.com/174/364/1743644599-58c24f6beed1f_articlex" alt="" /></p>

<h2>弹性元素</h2>

<p>包含在弹性容器里的每个节点都可以称为弹性元素，相应的，弹性元素也有自身的CSS属性</p>

<ul>
<li>order</li>
</ul>

<blockquote>
<p>弹性元素根据自身order的值来进行排序</p>
</blockquote>

<p><img src="" data-src="https://sfault-image.b0.upaiyun.com/178/889/1788892906-58c24f83de31c_articlex" alt="" /></p>

<ul>
<li>align-self</li>
</ul>

<blockquote>
<p>属性和左右与align-items相同，但由于是直接作用在弹性元素上面，优先级比align-items高</p>
</blockquote>

<p><img src="" data-src="https://sfault-image.b0.upaiyun.com/336/214/3362144820-58c24fa3663e5_articlex" alt="" /></p>

<ul>
<li>flex-grow</li>
</ul>

<blockquote>
<p>定义弹性元素侧轴拉伸因子</p>
</blockquote>

<p><img src="" data-src="https://sfault-image.b0.upaiyun.com/256/359/256359781-58c24fb4858a3_articlex" alt="" /></p>

<ul>
<li>flex-shrink</li>
</ul>

<blockquote>
<p>与flex-grow相反，定义弹性元素的压缩比例，当弹性元素的总长度超过容器长度时，各自的压缩率(默认是1)</p>
</blockquote>

<p><img src="" data-src="https://sfault-image.b0.upaiyun.com/257/534/2575344999-58c24fc86313f_articlex" alt="" /></p>

<ul>
<li>flex-basis</li>
</ul>

<blockquote>
<p>用来代替width，优先级比width高（如果flex-basis和width有一个值为auto，那么另外一个非auto优先级更高）</p>
</blockquote>

<p><img src="" data-src="https://sfault-image.b0.upaiyun.com/206/563/2065634934-58c24fdb4953c_articlex" alt="" /></p>

<ul>
<li>flex</li>
</ul>

<blockquote>
<p>flex-grow、flex-shrink、flex-basis的缩写</p>
</blockquote>

<pre><code class="language-css">.flex1{
    flex:none;
    /*
    相当于
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    */
}

.flex2{
    flex:1;
    /*
    相当于
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
    */
}

.flex3{
    flex: 1 30px;
    /*
    相当于
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 30px;
    */
}
</code></pre>
</article>
            <section class="author">
                
                <div class="avatar" style="background-image: url(https://pic1.58cdn.com.cn/nowater/webim/big/n_v2a9773b605e754c8493cf53ca8f5c0d7e.jpg);"></div>
                <a class="name" href="javascript:;">江矿先森.</a>
                <div class="intro">前(台)端(菜), 喜欢瞎折腾新技术. 乜野都识少少, 先可以扮代表.</div>
            </section>
            <section class="social">
                <a href="https://github.com/joname1" target="_blank">
                    <i class="iconfont i-github"></i>
                </a>
                <a href="javascript:alert('你电脑中了不知名的病毒, 并抛出了警告 atob(“d3hJZDogam9uYW1lLmxpYW5ndGFu”)')" target="_blank">
                    <i class="iconfont i-wechat"></i>
                </a>
                <a href="https://www.zhihu.com/people/joname-liangtan" target="_blank">
                    <i class="iconfont i-zhihu"></i>
                </a>
                <a href="javascript:alert('对方不想跟你讲话, 并向你扔来一段乱码 atob(“am9uYW1lLmxpYW5ndGFuQGdtYWlsLmNvbQ”)')" target="_blank">
                    <i class="iconfont i-email"></i>
                </a>
            </section>

            <div class="reward">
                <div class="reward-button">赏
                    <span class="reward-code">
                        <span class="alipay-code">
                            <img class="alipay-img wdp-appear" src="https://pic1.58cdn.com.cn/nowater/webim/big/n_v24d5eae197a764eb194b61e366ff263ba.jpg"><b>支付宝扫码</b>
                        </span>
                    <span class="wechat-code">
                            <img class="wechat-img wdp-appear" src="https://pic1.58cdn.com.cn/nowater/webim/big/n_v20ec7ae162f6a4219b8d0b429a2dbc9b3.jpg"><b>微信扫码</b>
                        </span>
                    </span>
                </div>
                
                <p class="reward-notice">如果文章对你有帮助, 扫上方二维码请我喝杯奶茶吧 :p</p>
            </div>

            <div id="comment"></div>
            
        </article>
    </article>
    <footer class="footer clearfix">
    <span class="copyright">
        <script>
            document.write(new Date().getFullYear());
        </script> <i class="fa fa-copyright"></i> Made with <i class="fa fa-heart"></i> using &ltjoname /&gt
        <span id="runtime_span"></span>
    </span>
</footer>
    <script src="/bundle/index.min.js"></script>
    <script src="https://cdn.staticfile.org/prism/1.16.0/prism.min.js"></script>
    <script>
        new Valine({el: '#comment',appId: 'PieJ3iHvVTJ9C5yBudK6sxaT-MdYXbMMI',appKey: 'Yt25unM4vc9wzBvC2lL20Frc',placeholder: 'ヾﾉ≧∀≦)o来啊, 快活啊, 反正有大把时光!!',path: window.location.pathname,avatar: 'retro',pageSize: 10,guest_info: ['nick', 'mail'],lang: 'en'});
    </script>
</body>

</html>